<template>
	<div>
		<el-card class="!border-none p-5" shadow="never" :body-style="{ padding: 0 }">
			<el-button type="primary" v-auth="'auth/menu/add'" class="mb-4" @click="handleAddMenu({})"> 添加菜单 </el-button>
			<el-button class="mb-4" @click="handleExpand"> 展开/折叠 </el-button>
			<el-table
				ref="tableRef"
				:data="state.tableList"
				v-loading="state.loading"
				row-key="id"
				:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
			>
				<el-table-column label="菜单名称" show-overflow-tooltip min-width="120">
					<template #default="{ row }">
						<SvgIcon :name="row.icon" />
						<span class="ml10">{{ row.name }}</span>
					</template>
				</el-table-column>
				<el-table-column label="类型" show-overflow-tooltip min-width="80">
					<template #default="{ row }">
						<el-tag v-if="row.type == 'M'" type="primary" size="small">目录</el-tag>
						<el-tag v-else-if="row.type == 'C'" type="success" size="small">菜单</el-tag>
						<el-tag v-else-if="row.type == 'A'" type="info" size="small">按钮</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="权限标识" show-overflow-tooltip min-width="100">
					<template #default="{ row }">
						<span>{{ row.perms }}</span>
					</template>
				</el-table-column>
				<el-table-column label="状态" show-overflow-tooltip min-width="100">
					<template #default="{ row }">
						<el-tag v-if="row.is_disable == 0" type="success">{{ row.disable_desc }}</el-tag>
						<el-tag v-else type="danger">{{ row.disable_desc }}</el-tag>
					</template>
				</el-table-column>
				<el-table-column label="排序" show-overflow-tooltip min-width="80">
					<template #default="{ row }">
						{{ row.sort }}
					</template>
				</el-table-column>
				<el-table-column label="操作" show-overflow-tooltip min-width="140">
					<template #default="{ row }">
						<el-button size="small" v-auth="'auth/menu/add'" text type="primary" @click="handleAddMenu(row)">添加</el-button>
						<el-button size="small" v-auth="'auth/menu/edit'" text type="primary" @click="handleEditMenu(row)">编辑</el-button>
						<el-button size="small" v-auth="'auth/menu/delete'" text type="primary" @click="handleDelMenu(row.id)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</el-card>
		<MenuDialog v-if="showDialog" ref="menuDialogRef" @submit="getTableList()" @close="showDialog = false" />
	</div>
</template>

<script setup lang="ts" name="authMenuList">
import { ref, onMounted, reactive, nextTick } from 'vue';
import { menuLists, menuDelete } from '/@/api/auth/menu';
import { messageBox } from '/@/utils/message';
import { setBackEndControlRefreshRoutes } from '/@/router/backEnd';
import MenuDialog from '/@/views/auth/menu/component/edit.vue';

const menuDialogRef = ref();

const tableRef = ref();

const showDialog = ref(false);

const state = reactive({
	loading: true,
	isExpand: false,
	tableList: [],
});

// 获取菜单列表
const getTableList = async () => {
	let res = await menuLists();
	state.tableList = res;
	state.loading = false;
};

// 添加菜单
const handleAddMenu = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		if(row?.id)menuDialogRef.value?.setFormPid(row);
		menuDialogRef.value?.open('add');
	});
};

// 编辑菜单
const handleEditMenu = async (row: any) => {
	showDialog.value = true;
	nextTick(() => {
		menuDialogRef.value?.setFormData(row, () => {
			menuDialogRef.value?.open('edit');
		});
	});
};

// 删除菜单
const handleDelMenu = async (id: number) => {
	messageBox(`确定要删除吗？`).then(async () => {
		await menuDelete({ id: id });
		RefreshRoute();
		getTableList();
	});
};

// 刷新路由
const RefreshRoute = async () => {
	await setBackEndControlRefreshRoutes();
};

// 菜单展开折叠
const handleExpand = () => {
	state.isExpand = !state.isExpand;
	toggleExpand(state.tableList, state.isExpand);
};

const toggleExpand = (item: any[], isEx = true) => {
	for (const key in item) {
		tableRef.value?.toggleRowExpansion(item[key], isEx);
		if (item[key]?.children) {
			toggleExpand(item[key].children!, isEx);
		}
	}
};

onMounted(() => {
	getTableList();
});
</script>
